<template>
	<view class="directory-main">
		<view class="list">
		
			<uni-collapse accordion class="collapse">
				<uni-collapse-item class="collapse-item" :title="item.name" v-for="(item,index) in list" :key="index" :open="index == 0">
					<view class="item-name" v-if="item.modules.length>0" v-for="(items,index) in item.modules" :key="index">
						<image src="../../../static/image/play.png" class="play" mode=""></image>
						<view class="name">
							{{items.name}}
						</view>
						<image src="../../../static/image/lock.png" class="lock" mode=""></image>
						
					</view>
					<view class="item-name" v-if="item.modules.length==0">暂无内容</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
	</view>
</template>

<script>
	export default {
		name: "directory",
		props:{
			list:{
				type:Array,
				default:()=>[]
			}
		},
		data() {
			return {

			}
		},
		created() {
			console.log(this.list)
		}
	}
</script>

<style lang="scss" scoped>
	.directory-main {
		width: 100%;
		margin: 20rpx auto 0;
		padding-bottom: 96rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		.list {
			width: 90%;
			margin: 0 auto;
			overflow: hidden;

			.collapse {
				margin-top: 30rpx;

				.collapse-item {
					background: #F5F6FA;

					::v-deep .uni-collapse-item__title-box {
						background: #F5F6FA;

						.uni-collapse-item__title-text {

							font-size: 28rpx;
							color: #0F1826;
							font-weight: 500;
						}
					}
					.item-name{
						display: flex;
						justify-content: space-between;
						align-items: center;
						// margin: 26rpx 0;
						border-bottom: 2rpx solid #F5F6FA;
						height: 120rpx;
						image{
							width: 28rpx;
							height: 28rpx;
							&.play{
								margin-right: 20rpx;
							}
							&.lock{
								margin-left: 20rpx;
							}
						}
						.name{
							margin:0 auto;
							flex: 1;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}
					}
				}
			}
		}
	}
</style>
